<template>
	<view>

		<!-- 头部 -->
		<navber id="head-navber" :navbarData="navbarData"></navber>
		<view class="bean">
			<view class="activity-container">
				<view class="activity-currency-content-list">

				</view>
				<view class="activity-currency-content-list">
				
				</view>
				<view class="activity-currency-content-list">

				</view>
				<view class="activity-currency-content-list">

				</view>
				<view class="activity-currency-content" @click="onGoBean()">
					趣豆:{{gameBean}}
				</view>
				<view class="activity-currency-content">
					<view class="item-card" @click="onGoCard(1)">卡片:{{gameCard}}</view>
					<view class="item-box" @click="onGoCard(2)">礼盒:{{gameBox}}</view>
				</view>
				<view class="activity-currency-content-list">
					<view class="item-tag">参与次数:{{gamePay}}</view>
					<view class="item-tag">剩余次数:{{gameRem}}</view>
					<view class="item-tag">中奖次数:{{gameWin}}</view>
				</view>
				<view class="activity-currency-content-list" v-if="gameRem==0">
					<view class="item">今日盲盒已抽完,明天再来参与吧</view>
				</view>
				<view class="activity-card-content">
					<view class="activity-card-container">
						<!-- <view class="activity-card-item " :class="card_type==4?'card-item4':''"
						@click="onSelectCard(4)">
						钻卡</view> -->
						<view class="activity-card-item " :class="card_type==3?'card-item3':''"
							@click="onSelectCard(3)">
							金盒</view>
						<view class="activity-card-item " :class="card_type==2?'card-item2':''"
							@click="onSelectCard(2)">
							银盒</view>
						<view class="activity-card-item " :class="card_type==1?'card-item1':''"
							@click="onSelectCard(1)">
							铜盒</view>
					</view>
				</view>
				<view class="activity-buy-content" :class="isGame?'buy-disabled':''" @click="joinGameProcess(1)"
					v-if="gameRem!=0">
					<view v-if="!isGame">抽盒(X1)</view>
					<view v-else>{{gameTime}}秒后开奖</view>
				</view>
				<view class="activity-buy-content-list" :class="isGame?'buy-disabled':''" v-if="gameRem!=0&&gameRem>=3">
					<view class="activity-buy-btn" @click="joinGameProcess(3)" v-if="gameRem>=3">抽盒(X3)</view>
					<view class="activity-buy-btn" @click="joinGameProcess(5)" v-if="gameRem>=5">抽盒(X5)</view>
					<view class="activity-buy-btn" @click="joinGameProcess(10)" v-if="gameRem>=10">抽盒(X10)</view>
					<view class="activity-buy-btn" @click="joinGameProcess(15)" v-if="gameRem>=15">抽盒(X15)</view>
				</view>
				<view class="activity-record-content">
					<view>参与记录</view>
					<view class="view-h">
						<view v-for="(item,index) in gameRecord" :key="index">{{index+1}} {{item.tag}} - {{item.time}}
						</view>
					</view>
				</view>
				<view class="activity-currency-content-list">
				
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navber from '@/components/navber/index';

	// pages/index/index.js
	const app = getApp();
	const Api = require('../../../api/index.js');
	const Config = require('../../../config/index.js');

	export default {
		components: {
			navber
		},
		data() {
			return {
				navbarData: {
					title: '趣味盲盒' //顶部标题
				},
				//导航栏
				imgUrl: Config.imgUrl,
				status: "ok",
				card_type: 3,
				gameTime: 3,
				number: 15,
				isGame: false,
				gameBean: 0,
				gameCard: 0,
				gameBox: 0,
				gamePay: 0,
				gameRem: 15,
				gameWin: 0,
				gameRecord: [{
					tag: "未抽中",
					time: "10-02 10:11"
				}],
				timeTi: null
			}
		},
		onShow() {
			this.getGameRecord();
			this.getUserData();
		},
		onPullDownRefresh: function() {
			this.getGameRecord();
			this.getUserData();
			uni.stopPullDownRefresh();
		},
		methods: {
			onGoBean() {
				//我的趣豆
				uni.navigateTo({
					url: '/pages/store/bean/index'
				});
			},
			onGoCard(type) {
				//卡片、礼盒
				uni.navigateTo({
					url: '/pages/store/card/index?class=' + type
				});
			},
			getGameRecord() {
				//盲盒开奖记录
				var json = {};
				Api.getGameRecord(json).then((res) => {
					if (res.code == 1) {
						this.setData({
							gameBean: res.data.bean,
							gameCard: res.data.card,
							gameBox: res.data.box,
							gamePay: res.data.pay,
							gameRem: res.data.rem,
							gameWin: res.data.win,
							gameRecord: res.data.game_list
						});
						if (res.data.now_game != "") {
							this.setTimeUp();
							this.setData({
								gameTime: res.data.now_game.count,
								isGame: true,
							});

						}
					}
				});
			},
			onSelectCard(type) {
				this.card_type = type;
			},
			joinGameProcess(number) {
				if (this.isGame) {
					uni.showToast({
						title: '开奖期间不能参与抢购',
						icon: 'none'
					});
					return;
				}
				var json = {
					type: this.card_type,
					number: number
				};
				Api.joinGameProcess(json).then((res) => {
					if (res.code == 1) {
						this.getGameRecord();
					}
				});
			},
			openGameProcess() {
				var json = {};
				Api.openGameProcess(json).then((res) => {
					if (res.code == 1) {

					}
				});
			},
			setTimeUp() {
				if (this.timeTi) {
					return;
				}
				let that = this;
				that.timeTi = setInterval(function() {
					// console.log(that.gameTime);
					if (that.gameTime <= 0) {
						that.gameTime = 300;
						that.isGame = false;
						clearInterval(that.timeTi);
						that.timeTi = null;
						that.openGameProcess();
					} else {
						that.setData({
							gameTime: that.gameTime - 1
						});
						that.setTimeUp();
					}
				}, 1000);

			},
			//获取用户数据
			getUserData() {
				Api.userCore({
					type: 'user'
				}).then((res) => {
					if (res.code == 1 && res.data) {
						this.setData({
							loginStatus: res.data.is_login,
							userInfo: res.data.userInfos,
							member_level: res.data.userInfos.member_level,
							status: res.data.status
						});
						let top_user_id = res.data.userInfos.top_user_id;

						if (parseInt(top_user_id) == 0) {
							this.setData({
								inviteShow: true
							});
						}
						app.globalData.popularize_code = res.data.userInfos.popularize_code;
						app.globalData.userInfo = res.data.userInfos;
					} else {
						this.setData({
							loginStatus: false,
							userInfo: {
								member_level: 0
							},
							member_level: 0
						});
						app.globalData.popularize_code = "";
						app.globalData.userInfo = {
							member_level: 0
						};
					}
				});
			},
		}
	}
</script>

<style>
	@import './index.css';
</style>
